<template>
  <div style="clear: both; ">
    <!-- //编辑、新增弹窗 -->
    <el-dialog :title="editForm.chanceno?'编辑':'新增'" v-model="editFormVisible" :visible.sync="editFormVisible" width="30%"
      :before-close="handleClose">
      <el-form :model="editForm" label-width="130px" min-height="150px" label-position="right" size="small" :rules="rules"
        ref="editForm">
        <el-form-item label="机会名称" required prop="chancename">
          <el-input v-model="editForm.chancename"></el-input>
        </el-form-item>

        <el-form-item label="销售机会所有人" style="">
          <el-input v-model="editForm.chancebelong"></el-input>
        </el-form-item>

        <el-form-item label="客户姓名" required prop="chancecustomer">
          <el-col :span="13">
            <el-input placeholder="姓名" v-model="editForm.chancecustomer"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="机会类型" required prop="chancekind">
          <el-col :span="13">
            <el-select placeholder="新客户" v-model="editForm.chancekind" prop="chancekind">
              <el-option label="新客户" value="新客户"></el-option>
              <el-option label="旧客户" value="旧客户"></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label="结束时间" required prop="enddate">
          <el-col :span="13">
            <el-date-picker v-model="editForm.enddate" type="date" style="width: 100%;" placeholder="选择日期"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item size="large" label-position="right">
          <el-button size="small" @click="cancel('editForm')" label-position="right">取 消</el-button>
          <el-button size="small" type="primary" @click=" editDo('editForm') " label-position="right">{{editForm.chanceno?'保存':'提交'}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>



    <!-- //分派人员弹窗 -->
    <el-dialog title="分配人员" :visible.sync="dialogVisible" width="30%">
      <div>
        选择人员：<el-select v-model="chooseuser">
          <el-option v-for="item in userList" :key="item.name" :label="item.name" :value="item.name" />
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false;chooseuser=''" style="margin-top: 40px;">取 消</el-button>
        <el-button type="primary" @click="chooseSure">确 定</el-button>
      </span>
    </el-dialog>


    <el-container style="height: 500px;width: 400; border: 1px solid #eee;">
      <!-- 头部 -->
      <el-header style="margin-top: 20px;height: 30px;">
        <el-row :gutter="20">

          <el-col :span="3">
            <div class="grid-content bg-purple">
              <el-button type="primary" :underline="false"  @click="isDelect(multipleSelection)" :disabled="this.multipleSelection.length === 0" size="mini"
                style="font-size: 14px;">批量删除</el-button>
            </div>
          </el-col>

          <el-col :span="11">
            <div class="grid-content bg-purple"></div>
          </el-col>

          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-input placeholder="搜索机会" v-model="key" size="small" style="width: 200px;height: 10px;font-size: 14px;"
                clearable>
              </el-input>
              <el-button size="mini" style="font-size: 14px;" @click="selectKey">查询</el-button>
              <el-button @click="showInsert()" type="primary" size="mini" style="font-size: 14px;">新增销售机会</el-button>
            </div>
          </el-col>
        </el-row>

      </el-header>


      <!-- 表 -->
      <el-main>
        <el-table  @selection-change="handleSelectionChange" :data="tableData" highlight-current-row v-loading="listLoading" style="border-top: 2px solid;border-top-color:#6299FF;border-bottom-color: #6299FF; with:100% height:300px">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>

          <el-table-column prop="chancename" label="机会名称" align="center">
          </el-table-column>

          <el-table-column prop="chancebelong" label="销售机会所有人" align="center">
          </el-table-column>

          <el-table-column prop="chancecustomer" label="姓名" align="center">
          </el-table-column>

          <el-table-column prop="chancekind" label="机会类型" align="center" sortable column-key="chancekind" :filters="[{ text: '新客户', value: '新客户' }, { text: '旧客户', value: '旧客户' }]"
            :filter-method="filterKind" filter-placement="bottom-end">
          </el-table-column>

          <el-table-column prop="enddate" label="结束时间" sortable column-key="date" :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
            :filter-method="filterHandler">
          </el-table-column>

          <el-table-column prop="state" align="left" label="状态" sortable column-key="state" :filters="[{ text: '已分配', value: '已分配' }, { text: '未分配', value: '未分配' }]"
            :filter-method="filterState" filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag :type="scope.row.state === '未分配' ? 'danger' : 'primary'" disable-transitions>{{scope.row.state}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="230px">
            <template slot-scope="scope">
              <!--      编辑 -->
              <i class="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" style="margin-right: 10px;"></i>
              <!--      删除 -->
              <i class="el-icon-delete" slot="reference" @click="open(scope.$index, scope.row)" style="margin-right: 10px;"></i>

              <el-button size="mini" :type="scope.row.state === '未分配' ? 'success': 'warning'" plain v-model="visible"
                @click='open2(scope.$index, scope.row)'>{{scope.row.state === '未分配' ?'指派所有人':'更改所有人'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>


      <!-- 分页 -->
      <el-footer>
        <el-pagination
        v-if="isSearch"
        style="margin-top: 20px;text-align: center;margin-top: 1%;"
         @current-change="handleCurrentChange"
         @size-change="handleSizeChange"
         :page-sizes="[3,5,10]"
         :current-page.sync="currentPage1"
         :page-size="pageSize"
         background='true'
         layout="total, prev, pager, next,sizes, jumper"
         :total="totleSize">
        </el-pagination>
      </el-footer>
    </el-container>

  </div>
</template>

<script src="./vue.js"></script>
<script>
  export default {
    data() {
      return {
        pageSize: 5,
        currentPage1: 1,
        totleSize: 0,
        isSearch:true,
        sels: [], //选中的值显示
        userList: [],

        key: '', //input
        tableData: [],
        multipleSelection: [],
        listTable:[],
        editFormVisible: false,
        dialogVisible: false,
        chooseuser:"",
        chanceno: '',
        currentPage4:1,
        //编辑界面数据
        editForm: {
          chanceno: "",
          chancename: '不车多不',
          chancebelong: '',
          chancecustomer: '',
          chancekind: '',
          enddate: '',
          state: '',
        },
        rules: {
          chancename: [{
              required: true,
              message: '请输入机会名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          chancecustomer: [{
              required: true,
              message: '请输入销售机会所有人',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          chancekind: [{
            required: true,
            message: '请选择机会类型',
            trigger: 'change'
          }],
          enddate: [{
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }],
        },
      }
    },
    created() {
      this.getdata();
    },
    methods: {
      //选中时触发
     handleSelectionChange(val) { //获取选中的项目
       this.multipleSelection = val;
     },
      showInsert() {
        // this.$refs['editform'].resetFields();
        this.editFormVisible = true;
        this.editForm.chanceno = "";
        this.editForm.chancename = "";
        this.editForm.chancebelong = "";
        this.editForm.chancecustomer = "";
        this.editForm.chancekind = "";
        this.editForm.enddate = "";
        this.editForm.state = "";
      },
      //分页
      getdata() {
        this.getRequest('/getStateList?beginPage=' + this.currentPage1 + '&pageSize=' + this.pageSize)
          .then(successResponse => {
            if (successResponse.data.status == 200) {
              this.tableData = successResponse.data.obj;
              this.totleSize = successResponse.data.totleSize;
            } else
              this.$message.error(successResponse.data.msg);
          })
          .catch(failResponse => {
            this.$message.error('网络不通畅');
          })
      },
      handleCurrentChange(val) {
        this.getdata()
      },
      handleSizeChange:function(psize){
            this.$data.pageSize = psize;
            this.getdata()
      },
      filterHandler(value, row, column) {
       const property = column['property'];
         return row[property] === value;
       },
       filterState(value, row) {
         return row.state === value;
       },
       filterKind(value, row) {
         return row.chancekind === value;
       },
      //模糊查询数据
      selectKey() {
        if(!this.key){
           this.getdata();
           this.isSearch=true;
           return;
        }
        else{
         this.postRequest('/selectKey',{
            str: this.key
         })
            .then(successResponse => {
              if (successResponse.data.status == 200) {
                this.tableData = successResponse.data.obj;
                this.isSearch=false;
              } else
                this.$message.error(successResponse.data.msg);
            })
            .catch(failResponse => {
              this.$message.error('网络不通畅');
            })
         }
      },
      //显示编辑界面
      handleEdit: function(index, row) {
        this.editFormVisible = true;
        this.editForm = Object.assign({}, row);
        // this.$message.success(row.chancename+'123')
      },
      cancel(formName) {
        this.$refs[formName].resetFields();
        this.editFormVisible = false
      },
      //保存编辑/新增提交
      editDo(formName) {
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
            if (this.editForm.chanceno) {
              this.postRequest('/saveChance', {
                  chanceno: this.editForm.chanceno,
                  chancename: this.editForm.chancename,
                  chancebelong: this.editForm.chancebelong,
                  chancecustomer: this.editForm.chancecustomer,
                  chancekind: this.editForm.chancekind,
                  enddate: this.editForm.enddate,
                  state: this.editForm.state,
                })
                .then(successResponse => {
                  if (successResponse.data.status == 200) {
                    this.$message.success("保存成功！");
                    // this.getUsersInfo()
                    this.getdata()
                  } else
                    this.$message.error(successResponse.data.msg);
                })
                .catch(failResponse => {
                  this.$message.error('网络不通畅');
                })
              this.editFormVisible = false;
            } else {
              this.postRequest('/insertChance', {
                  chancename: this.editForm.chancename,
                  chancebelong: this.editForm.chancebelong,
                  chancecustomer: this.editForm.chancecustomer,
                  chancekind: this.editForm.chancekind,
                  enddate: this.editForm.enddate,
                  state: this.editForm.chancebelong === '' ? '未分配' : '已分配',
                })
                .then(successResponse => {
                  if (successResponse.data.status == 200) {
                    this.$message.success("新增成功！");
                    // this.getUsersInfo()
                    this.getdata()
                  } else
                    this.$message.error(successResponse.data.msg);
                })
                .catch(failResponse => {
                  this.$message.error('网络不通畅');
                })
              this.editFormVisible = false;
            }
          // } else {
          //   console.log('error submit!!');
          //   return false;
          // }
        // });
      },
      //打开分派窗口
      open2(index, row) {
        this.dialogVisible = true;
        this.getchancedata();
        this.editForm = Object.assign({}, row);
        this.chanceno = this.editForm.chanceno;
      },
      getchancedata() {
        this.getRequest('/getRoleList?role=2')
          .then(successResponse => {
            if (successResponse.data.status == 200) {
              this.userList = successResponse.data.obj;
            } else
              this.$message.error(successResponse.data.msg);
          })
          .catch(failResponse => {
            this.$message.error('网络不通畅');
          })
      },
      //关闭分派弹窗
      chooseSure() {
        this.dialogVisible = false;
        this.postRequest('/chancebelong', {
            chancebelong: this.chooseuser,
            chanceno: this.chanceno
          }).then(successResponse => {
            if (successResponse.data.status == 200) {
              this.$message.success("指派成功！");
              this.getdata()
            } else
              this.$message.error(successResponse.data.msg);
          })
          .catch(failResponse => {
            this.$message.error('网络不通畅');
          })
      },

      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //删除
      open(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.postRequest('/deleteChance', {
              chanceno: row.chanceno,
            })
            .then(successResponse => {
              if (successResponse.data.status == 200) {
                this.$message.success("删除成功！");
                this.getdata();
                this.currentPage1=1;
              } else
                this.$message.error(successResponse.data.msg);
            })
            .catch(failResponse => {
              this.$message.error('网络不通畅');
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //批量删除
      isDelect() {
        this.listTable = [];
        this.multipleSelection.forEach(item => {
          this.listTable.push(item.chanceno);
        })
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.getRequest('/muchDel?nos=' + this.listTable)
            .then(successResponse => {
              if (successResponse.data.status == 200) {
                this.search = false;
                this.currentPage = 1;
                this.$message.success("删除成功!");
                this.getdata()
              } else
                this.$message.error(successResponse.data.msg);
            })
            .catch(failResponse => {
              this.$message.error('网络不通畅');
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    }
  }
</script>

<style>
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
